/*
 *  本文件主要放置重复样式
 */

// 水平添加属性
@mixin property-horizontal($prop, $start, $end: $start) {
  @if $start==0 and $end==0 {
    #{$prop}-left: $start;
    #{$prop}-right: $end;
  }

  @else {
    #{$prop}-left: $start;
    #{$prop}-right: $end;

    @at-root {
      @supports ((margin-inline-start: 0) or (-webkit-margin-start: 0)) {
        & {
          @if $start !=null {
            #{$prop}-left: unset;
          }

          @if $end !=null {
            #{$prop}-right: unset;
          }

          -webkit-#{$prop}-start: $start;
          #{$prop}-inline-start: $start;
          -webkit-#{$prop}-end: $end;
          #{$prop}-inline-end: $end;
        }
      }
    }
  }
}

// 为所有方向添加属性
@mixin property($prop, $top, $end: $top, $bottom: $top, $start: $end) {
  @include property-horizontal($prop, $start, $end);

  #{$prop}-top: $top;
  #{$prop}-bottom: $bottom;
}

// 为所有方向添加padding
@mixin padding($top, $end: $top, $bottom: $top, $start: $end) {
  @include property(padding, $top, $end, $bottom, $start);
}

// 为所有方向添加margin
@mixin margin($top, $end: $top, $bottom: $top, $start: $end) {
  @include property(margin, $top, $end, $bottom, $start);
}

// 为所有方向添加border
@mixin border($top, $end: $top, $bottom: $top, $start: $end) {
  @include property(border, $top, $end, $bottom, $start);
}

// 容器全填充
@mixin fill-container {
  width: 100%;
  height: 100%;
}

// flex布局
@mixin flex($align-items: stretch,$justify-content: flex-start,$flex-direction: row,$flex-wrap: nowrap,$align-content: stretch) {
  display: flex;
  flex-direction: $flex-direction;
  flex-wrap: $flex-wrap;
  align-content: $align-content;
  align-items: $align-items;
  justify-content: $justify-content;
}
